<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Jquery</title>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<style type="text/css">
		#div2{
			height: 30px;
			width: 10px;
			background-color: #F00;
		}
	</style>	
</head>
<body>	
	<div id="div1"></div>
	<button id="btn1">btn1</button>
	<button id="btn2">btn2</button>
	<button id="start">Start</button>
	<button id="stop" disabled="true">Stop</button>
	<div id="div2"></div>
	<script type="text/javascript">
		function btnClcik(){
			$('#div1').html('Hello Btn');
		}
		function changeBar(){
			console.log("change bar");
			var newWidth=($('#div2').width()+10)%500;
			$('#div2').width(newWidth);
			$('#div2').text(newWidth/500*100+'%');
		}
		var timer=undefined;
		$(document).ready(function() {
			$('#div1').html('Hello JQuery');
			$('#btn1').on('click',btnClcik);
			$('#btn2').on('click',function(event){
				console.dir($('#div2').css('width'));
				$('#div2').width($('#div2').width()+10);
			});
			$('#start').on('click',function(event){
				timer=setInterval(changeBar,100);
				console.dir($('#stop'));
				event.currentTarget.disabled=true;
				$('#stop').attr('disabled',false);
			});
			$('#stop').on('click',function(event){
				clearInterval(timer);
				console.log("stop change");
				event.currentTarget.disabled=true;
				$('#start')[0].disabled=false;
			});
		});

	</script>
</body>
</html>